<!-- 首页 -->
<template>
	<view>
		<view class="tab-btn-box">
			<view class="tab-btn">
				<view class="tab-btn-image" @click="dianzan">
					<view class="tab-btn-dot" v-if="user.giveNewNum > 0">{{user.giveNewNum}}</view>
					<image src="../../static/dianzan.png"></image>
				</view>
				<view class="tab-btn-text">评论点赞</view>
			</view>
			<!-- <view class="tab-btn">
				<view class="tab-btn-image" @click="fans">
					<view class="tab-btn-dot">2</view>
					<image src="../../static/fans.png"></image>
				</view>
				<view class="tab-btn-text">新增关注</view>
			</view>
			<view class="tab-btn">
				<view class="tab-btn-image" @click="fangke">
					<image src="../../static/zuji.png"></image>
				</view>
				<view class="tab-btn-text">访客记录</view>
			</view> -->
			<view class="tab-btn">
				<view class="tab-btn-image" @click="reply">
					<view class="tab-btn-dot" v-if="user.commentNewNum > 0">{{user.commentNewNum}}</view>
					<image src="../../static/xiaoxi.png"></image>
				</view>
				<view class="tab-btn-text">评论回复</view>
			</view>
		</view>
		<user-auth></user-auth>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {}
		};
	},
	onLoad() {
		this.getUserInfo();
	},
	methods: {
		getUserInfo() {
			this.$u.get('/system/user/getInfo').then(res => {
				this.user = res.user;
				this.$u.vuex('vuex_user', this.user);
			})
		},
		chat(item) {
			this.$u.post('/im/roomUser/updateRead',{
				id: item.id
			}).then(res => {
				this.$u.vuex('message', res.data);
				this.$u.route({
					url: 'tn_components/chat/chat',
					params: {
						roomId: item.roomId,
						nickName: item.nickName,
						sendUserId: item.sendUserId
					}
				});
			})
		},
		reply() {
			this.$u.route({
				url: 'packgeMine/pages/index/reply',
			});
		},
		dianzan() {
			this.$u.route({
				url: 'packgeMine/pages/index/dianzan',
			});
		},
		fans() {
			this.$u.route({
				url: 'packgeMine/pages/index/fans',
			});
		},
		fangke() {
			this.$u.route({
				url: 'packgeMine/pages/index/fangke',
			});
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.user-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 15px;
	}
	.u-image {
		display: flex;
		justify-content: center;
	}
	.user-right {
		padding: 15px;
		padding-left: 15px;
		padding-right: 0;
		flex: 1;
	}
	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-bottom: 10px;
	}
	.nickname {
		font-size: 28rpx;
	}
	.time {
		font-size: 26rpx;
		color: #909399;
	}
	.user-content {
		font-size: 26rpx;
		color: #909399;
	}
	.border-bottom {
		position: relative;
	}
	.border-bottom:before {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-bottom: 1rpx solid #f4f4f5;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
	}
	.user-avartar {
		position: relative;
	}
	.online {
		background-color: #fff;
		width: 25rpx;
		height: 25rpx;
		border-radius: 100%;
		border: 2px solid #fff;
		background-color: #DD514C;
		position: absolute;
		bottom: 10rpx;
		right: 4rpx;
	}
	.loadmore-box {
		padding: 10px 0;
	}
	.un-read {
		background-color: red;
		color: #fff;
		padding: 4px;
		font-size: 11px;
		border-radius: 14px;
		height: 15px;
		display: flex;
		align-items: center;
	}
	.tab-btn-box {
		padding: 15px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tab-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	.tab-btn image{
		width: 50px;
		height: 50px;
	}
	.tab-btn-text {
		margin-top: 5px;
		font-size: 28rpx;
	}
	.tab-btn-dot {
		background-color: #DD514C;
		position: absolute;
		right: 0;
		z-index: 9;
		border-radius: 100%;
		font-size: 10px;
		padding: 20rpx;
		color: #fff;
		height: 10rpx;
		width: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tab-btn-image {
		position: relative;
	}
	
</style>
